/// <reference path="../References.d.ts"/>
import * as React from 'react';
import * as Theme from '../Theme';
import * as SubscriptionTypes from '../types/SubscriptionTypes';
import SubscriptionStore from '../stores/SubscriptionStore';
import LoadingBar from './LoadingBar';
import Subscription from './Subscription';
import Users from './Users';
import UserDetailed from './UserDetailed';
import Nodes from './Nodes';
import Policies from './Policies';
import Authorities from './Authorities';
import Certificates from './Certificates';
import Secrets from './Secrets';
import Endpoints from './Endpoints';
import Alerts from './Alerts';
import Checks from './Checks';
import Logs from './Logs';
import Services from './Services';
import Settings from './Settings';
import RouterRoute from './RouterRoute';
import RouterRoutes from './RouterRoutes';
import RouterLink from './RouterLink';
import * as UserActions from '../actions/UserActions';
import * as SessionActions from '../actions/SessionActions';
import * as DeviceActions from '../actions/DeviceActions';
import * as AlertActions from '../actions/AlertActions';
import * as CheckActions from '../actions/CheckActions';
import * as AuditActions from '../actions/AuditActions';
import * as SshcertificateActions from '../actions/SshcertificateActions';
import * as NodeActions from '../actions/NodeActions';
import * as PolicyActions from '../actions/PolicyActions';
import * as AuthorityActions from '../actions/AuthorityActions';
import * as CertificateActions from '../actions/CertificateActions';
import * as SecretActions from '../actions/SecretActions';
import * as EndpointActions from '../actions/EndpointActions';
import * as LogActions from '../actions/LogActions';
import * as ServiceActions from '../actions/ServiceActions';
import * as SettingsActions from '../actions/SettingsActions';
import * as SubscriptionActions from '../actions/SubscriptionActions';

interface State {
	subscription: SubscriptionTypes.SubscriptionRo;
	disabled: boolean;
}

const css = {
	nav: {
		overflowX: 'auto',
		overflowY: 'auto',
		userSelect: 'none',
		height: 'auto',
	} as React.CSSProperties,
	navTitle: {
		height: 'auto',
	} as React.CSSProperties,
	navGroup: {
		flexWrap: 'wrap',
		height: 'auto',
		padding: '10px 0',
	} as React.CSSProperties,
	link: {
		padding: '0 8px',
		color: 'inherit',
	} as React.CSSProperties,
	sub: {
		color: 'inherit',
	} as React.CSSProperties,
	heading: {
		marginRight: '11px',
		fontSize: '18px',
		fontWeight: 'bold',
		width: '100px',
	} as React.CSSProperties,
};

export default class Main extends React.Component<{}, State> {
	constructor(props: any, context: any) {
		super(props, context);
		this.state = {
			subscription: SubscriptionStore.subscription,
			disabled: false,
		};
	}

	componentDidMount(): void {
		SubscriptionStore.addChangeListener(this.onChange);
		SubscriptionActions.sync(false);
	}

	componentWillUnmount(): void {
		SubscriptionStore.removeChangeListener(this.onChange);
	}

	onChange = (): void => {
		this.setState({
			...this.state,
			subscription: SubscriptionStore.subscription,
		});
	}

	render(): JSX.Element {
		if (!this.state.subscription) {
			return <div/>;
		}

		return <div>
			<nav className="bp5-navbar layout horizontal" style={css.nav}>
				<div
					className="bp5-navbar-group bp5-align-left flex"
					style={css.navTitle}
				>
					<img className="logo-light bp5-navbar-heading" style={css.heading} src="" alt="Pritunl Zero"/>
					<img className="logo-dark bp5-navbar-heading" style={css.heading} src="" alt="Pritunl Zero"/>
				</div>
				<div className="bp5-navbar-group bp5-align-right" style={css.navGroup}>
					<RouterLink
						className="bp5-button bp5-minimal bp5-icon-people"
						style={css.link}
						to="/users"
					>
						Users
					</RouterLink>
					<RouterLink
						className="bp5-button bp5-minimal bp5-icon-cloud"
						style={css.link}
						to="/services"
					>
						Services
					</RouterLink>
					<RouterLink
						className="bp5-button bp5-minimal bp5-icon-layers"
						style={css.link}
						to="/nodes"
					>
						Nodes
					</RouterLink>
					<RouterLink
						className="bp5-button bp5-minimal bp5-icon-filter"
						style={css.link}
						to="/policies"
					>
						Policies
					</RouterLink>
					<RouterLink
						className="bp5-button bp5-minimal bp5-icon-office"
						style={css.link}
						to="/authorities"
					>
						Authorities
					</RouterLink>
					<RouterLink
						className="bp5-button bp5-minimal bp5-icon-endorsed"
						style={css.link}
						to="/certificates"
					>
						Certificates
					</RouterLink>
					<RouterLink
						className="bp5-button bp5-minimal bp5-icon-key"
						style={css.link}
						to="/secrets"
					>
						Secrets
					</RouterLink>
					<RouterLink
						className="bp5-button bp5-minimal bp5-icon-shield"
						style={css.link}
						to="/endpoints"
					>
						Endpoints
					</RouterLink>
					<RouterLink
						className="bp5-button bp5-minimal bp5-icon-notifications"
						style={css.link}
						to="/alerts"
					>
						Alerts
					</RouterLink>
					<RouterLink
						className="bp5-button bp5-minimal bp5-icon-lifesaver"
						style={css.link}
						to="/checks"
					>
						Health Checks
					</RouterLink>
					<RouterLink
						className="bp5-button bp5-minimal bp5-icon-history"
						style={css.link}
						to="/logs"
					>
						Logs
					</RouterLink>
					<RouterLink
						className="bp5-button bp5-minimal bp5-icon-cog"
						style={css.link}
						to="/settings"
					>
						Settings
					</RouterLink>
					<RouterLink
						to="/subscription"
						style={css.sub}
					>
						<button
							className="bp5-button bp5-minimal bp5-icon-credit-card"
							style={css.link}
							onClick={(): void => {
								SubscriptionActions.sync(true);
							}}
						>Subscription</button>
					</RouterLink>
					<a
						className="bp5-button bp5-minimal bp5-icon-comment"
						style={css.link}
						href="https://forum.pritunl.com"
						target="_blank"
					>Community Forum</a>
					<button
						className="bp5-button bp5-minimal bp5-icon-refresh"
						disabled={this.state.disabled}
						onClick={() => {
							let pathname = window.location.hash.replace(/^#/, '');

							this.setState({
								...this.state,
								disabled: true,
							});

							if (pathname === '/users') {
								UserActions.sync().then((): void => {
									this.setState({
										...this.state,
										disabled: false,
									});
								}).catch((): void => {
									this.setState({
										...this.state,
										disabled: false,
									});
								});
							} else if (pathname.startsWith('/user/')) {
								UserActions.reload().then((): void => {
									this.setState({
										...this.state,
										disabled: false,
									});
								}).catch((): void => {
									this.setState({
										...this.state,
										disabled: false,
									});
								});
								SessionActions.reload().then((): void => {
									this.setState({
										...this.state,
										disabled: false,
									});
								}).catch((): void => {
									this.setState({
										...this.state,
										disabled: false,
									});
								});
								DeviceActions.reload().then((): void => {
									this.setState({
										...this.state,
										disabled: false,
									});
								}).catch((): void => {
									this.setState({
										...this.state,
										disabled: false,
									});
								});
								SshcertificateActions.reload().then((): void => {
									this.setState({
										...this.state,
										disabled: false,
									});
								}).catch((): void => {
									this.setState({
										...this.state,
										disabled: false,
									});
								});
								AuditActions.reload().then((): void => {
									this.setState({
										...this.state,
										disabled: false,
									});
								}).catch((): void => {
									this.setState({
										...this.state,
										disabled: false,
									});
								});
							} else if (pathname === '/nodes') {
								ServiceActions.syncNames();
								NodeActions.sync().then((): void => {
									this.setState({
										...this.state,
										disabled: false,
									});
								}).catch((): void => {
									this.setState({
										...this.state,
										disabled: false,
									});
								});
							} else if (pathname === '/policies') {
								ServiceActions.syncNames();
								AuthorityActions.sync();
								SettingsActions.sync();
								PolicyActions.sync().then((): void => {
									this.setState({
										...this.state,
										disabled: false,
									});
								}).catch((): void => {
									this.setState({
										...this.state,
										disabled: false,
									});
								});
							} else if (pathname === '/authorities') {
								AuthorityActions.sync().then((): void => {
									this.setState({
										...this.state,
										disabled: false,
									});
								}).catch((): void => {
									this.setState({
										...this.state,
										disabled: false,
									});
								});
							} else if (pathname === '/certificates') {
								CertificateActions.sync().then((): void => {
									this.setState({
										...this.state,
										disabled: false,
									});
								}).catch((): void => {
									this.setState({
										...this.state,
										disabled: false,
									});
								});
							} else if (pathname === '/secrets') {
								SecretActions.sync().then((): void => {
									this.setState({
										...this.state,
										disabled: false,
									});
								}).catch((): void => {
									this.setState({
										...this.state,
										disabled: false,
									});
								});
							} else if (pathname === '/alerts') {
								AlertActions.sync().then((): void => {
									this.setState({
										...this.state,
										disabled: false,
									});
								}).catch((): void => {
									this.setState({
										...this.state,
										disabled: false,
									});
								});
							} else if (pathname === '/checks') {
								CheckActions.sync().then((): void => {
									this.setState({
										...this.state,
										disabled: false,
									});
								}).catch((): void => {
									this.setState({
										...this.state,
										disabled: false,
									});
								});
							} else if (pathname === '/endpoints') {
								AuthorityActions.sync();
								EndpointActions.sync().then((): void => {
									this.setState({
										...this.state,
										disabled: false,
									});
								}).catch((): void => {
									this.setState({
										...this.state,
										disabled: false,
									});
								});
							} else if (pathname === '/logs') {
								LogActions.sync().then((): void => {
									this.setState({
										...this.state,
										disabled: false,
									});
								}).catch((): void => {
									this.setState({
										...this.state,
										disabled: false,
									});
								});
							} else if (pathname === '/services') {
								AuthorityActions.sync();
								ServiceActions.sync().then((): void => {
									this.setState({
										...this.state,
										disabled: false,
									});
								}).catch((): void => {
									this.setState({
										...this.state,
										disabled: false,
									});
								});
							} else if (pathname === '/settings') {
								SettingsActions.sync().then((): void => {
									this.setState({
										...this.state,
										disabled: false,
									});
								}).catch((): void => {
									this.setState({
										...this.state,
										disabled: false,
									});
								});
							} else if (pathname === '/subscription') {
								SubscriptionActions.sync(true).then((): void => {
									this.setState({
										...this.state,
										disabled: false,
									});
								}).catch((): void => {
									this.setState({
										...this.state,
										disabled: false,
									});
								});
							} else {
								this.setState({
									...this.state,
									disabled: false,
								});
							}
						}}
					>Refresh</button>
					<button
						className="bp5-button bp5-minimal bp5-icon-log-out"
						onClick={() => {
							window.location.href = '/logout';
						}}
					>Logout</button>
					<button
						className="bp5-button bp5-minimal bp5-icon-moon"
						onClick={(): void => {
							Theme.toggle();
							Theme.save();
						}}
					/>
				</div>
			</nav>
			<LoadingBar intent="primary"/>
			<RouterRoutes>
				<RouterRoute path="/" render={() => (
					<Users/>
				)}/>
				<RouterRoute path="/users" render={() => (
					<Users/>
				)}/>
				<RouterRoute path="/user" render={() => (
					<UserDetailed/>
				)}/>
				<RouterRoute path="/user/:userId" render={(data) => (
					<UserDetailed userId={data.params.userId}/>
				)}/>
				<RouterRoute path="/nodes" render={() => (
					<Nodes/>
				)}/>
				<RouterRoute path="/policies" render={() => (
					<Policies/>
				)}/>
				<RouterRoute path="/authorities" render={() => (
					<Authorities/>
				)}/>
				<RouterRoute path="/certificates" render={() => (
					<Certificates/>
				)}/>
				<RouterRoute path="/secrets" render={() => (
					<Secrets/>
				)}/>
				<RouterRoute path="/alerts" render={() => (
					<Alerts/>
				)}/>
				<RouterRoute path="/checks" render={() => (
					<Checks/>
				)}/>
				<RouterRoute path="/endpoints" render={() => (
					<Endpoints/>
				)}/>
				<RouterRoute path="/logs" render={() => (
					<Logs/>
				)}/>
				<RouterRoute path="/services" render={() => (
					<Services/>
				)}/>
				<RouterRoute path="/settings" render={() => (
					<Settings/>
				)}/>
				<RouterRoute path="/subscription" render={() => (
					<Subscription/>
				)}/>
			</RouterRoutes>
		</div>;
	}
}
